<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据应用-数据项目-时间线</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">

    <style>
        .line {
            border-bottom: 1px solid #dddddd;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="timeline">
    <div class="time-item-create">
        <i class="fa fa-user-o bg-cyan"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                包含的数据源<br/>
            </div>
        </div>
    </div>
    <div class="time-item-init">
        <i class="fa fa-cubes bg-success"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                {{body}}<br/>
            </div>
        </div>
    </div>
    <div class="time-item-upgrade">
        <i class="fa fa-arrow-up bg-warning"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                {{body}}
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/sql/sql.js"></script>
<script src="../../plugins/codemirror/addon/hint/show-hint.js"></script>
<script src="../../plugins/codemirror/addon/hint/sql-hint.js"></script>
<script src="../../plugins/clipboard/clipboard.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var templateCreate = $(".time-item-create").html();
    var templateInit = $(".time-item-init").html();
    var templateUpgrade = $(".time-item-upgrade").html();

    var templateDate = "<div class=\"time-label time-group\"><span class=\"bg-navy\">{{data}}</span></div>";
    var templateStart = "<div><i class=\"fa fa-clock-o bg-primary\"></i></div>";

    var templateBadge = "<span class=\"badge {{class}}\">{{value}}</span>";
    var templateButton = "<button class=\"btn btn-xs btn-outline-info {{btn-class}}\" id=\"{{id}}\" data-data=\"{{data}}\"><i class=\"fa {{fa-class}}\"></i> {{value}}</button>";
    var templateTextarea = "<textarea id=\"{{id}}\">{{value}}</textarea>";

    $(".timeline").empty();

    var params = Utils.getParams(location.href);
    var dataProjectId = params["id"];

    $.ajax({
        url: Url.dataService.dataProjectTimeline.replace("{id}", dataProjectId),
        type: HttpMethod.get,
        success: function (result, status, xhr) {
            $(".timeline").empty();

            for (var i = result.length - 1; i >= 0; i--) {
                var date = result[i];
                $(".timeline").append(templateDate.replace(new RegExp("{{data}}", "gm"), date.date));
                for (var j = date.items.length - 1; j >= 0; j--) {
                    var uuid = Math.random().toString(36).slice(-8);
                    var time = date.items[j];

                    var template;
                    if (time.type === "CREATE") {
                        template = templateCreate;
                    } else if (time.type === "INIT") {
                        template = templateInit;
                    } else if (time.type === "UPGRADE") {
                        template = templateUpgrade;
                    }
                    template = "<div>" + template + "</div>";
                    $(".timeline").append(template
                        .replace(new RegExp("{{num}}", "gm"), time.num)
                        .replace(new RegExp("{{caption}}", "gm"), time.typeValue)
                        .replace(new RegExp("{{time}}", "gm"), time.time)
                        .replace(new RegExp("{{user}}", "gm"), time.user)
                        .replace(new RegExp("{{body}}", "gm"), time.content)
                        .replace(new RegExp("{{resultClass}}", "gm"), time.result ? "bg-success" : "bg-danger")
                        .replace(new RegExp("{{resultValue}}", "gm"), time.result ? "成功" : "失败")
                        .replace(new RegExp("{{relateNum1}}", "gm"), time.relateNum1)
                        .replace(new RegExp("{{relateNum2}}", "gm"), time.relateNum2)
                        .replace(new RegExp("{{relateNum3}}", "gm"), time.relateNum3)
                        .replace(new RegExp("{{data1}}", "gm"), time.data1)
                        .replace(new RegExp("{{data2}}", "gm"), time.data2)
                        .replace(new RegExp("{{data3}}", "gm"), time.data3)
                        .replace(new RegExp("{{data4}}", "gm"), time.data4)
                        .replace(new RegExp("{{data5}}", "gm"), time.data5)
                        .replace(new RegExp("{{uuid}}", "gm"), uuid)
                    );
                    if (time.type === "CREATE") {
                        var $body = $("#timeline-body-" + uuid);
                        var data1Array = JSON.parse(time.data1);
                        for (var k = 0; k < data1Array.length; k++) {
                            var data1Item = data1Array[k];
                            var data1ItemClass = data1Item.typeName === "MYSQL" ? "bg-info" : "bg-warning";
                            $body.append(templateBadge
                                .replace(new RegExp("{{class}}", "gm"), data1ItemClass)
                                .replace(new RegExp("{{value}}", "gm"), data1Item.typeValue)
                            );
                            $body.append(" " + data1Item.name + "<br/>");
                        }
                    } else if (time.type === "INIT") {
                        var $body = $("#timeline-body-" + uuid);
                        var data1Array = JSON.parse(time.data1);
                        for (var k = 0; k < data1Array.length; k++) {
                            var data1Item = data1Array[k];
                            var data1ItemClass = data1Item.typeName === "MYSQL" ? "bg-info" : "bg-warning";
                            $body.append(templateBadge
                                .replace(new RegExp("{{class}}", "gm"), data1ItemClass)
                                .replace(new RegExp("{{value}}", "gm"), data1Item.typeValue)
                            );
                            $body.append(" " + data1Item.name + "： ");
                            $body.append(templateButton
                                .replace(new RegExp("{{btn-class}}", "gm"), "btn-download")
                                .replace(new RegExp("{{fa-class}}", "gm"), "fa-download")
                                .replace(new RegExp("{{value}}", "gm"), "下载初始化文件")
                                .replace(new RegExp("{{data}}", "gm"), data1Item.script)
                                .replace(new RegExp("{{id}}", "gm"), Math.random().toString(36).slice(-8))
                            );
                            if (data1Item.statusName !== "SUCCESS") {
                                $body.append("<br/><b>异常信息：</b><code class=\"text-danger\">" + data1Item.errorMessage + "</code> ");
                            }
                            $body.append("<br/>");
                        }
                    } else if (time.type === "UPGRADE") {
                        var $body = $("#timeline-body-" + uuid);
                        var data1Array = JSON.parse(time.data1);
                        for (var k = 0; k < data1Array.length; k++) {
                            var data1Item = data1Array[k];
                            var data1ItemClass = data1Item.typeName === "MYSQL" ? "bg-info" : "bg-warning";
                            $body.append("<div class='line'></div>");
                            $body.append(templateBadge
                                .replace(new RegExp("{{class}}", "gm"), data1ItemClass)
                                .replace(new RegExp("{{value}}", "gm"), data1Item.typeValue)
                            );
                            $body.append(" " + data1Item.name + "： ");
                            var btnUuid = Math.random().toString(36).slice(-8);
                            var textAreaUuid = Math.random().toString(36).slice(-8);
                            $body.append(templateButton
                                .replace(new RegExp("{{btn-class}}", "gm"), "btn-copy")
                                .replace(new RegExp("{{fa-class}}", "gm"), "fa-copy")
                                .replace(new RegExp("{{value}}", "gm"), "复制升级脚本")
                                .replace(new RegExp("{{data}}", "gm"), textAreaUuid)
                                .replace(new RegExp("{{id}}", "gm"), btnUuid)
                            );
                            $body.append(templateTextarea
                                .replace(new RegExp("{{value}}", "gm"), data1Item.script)
                                .replace(new RegExp("{{id}}", "gm"), textAreaUuid)
                            );
                            if (data1Item.statusName !== "SUCCESS") {
                                var data1ItemClass = data1Item.typeName === "MYSQL" ? "bg-info" : "bg-warning";
                                $body.append("<b>异常信息：</b><code class=\"text-danger\">" + data1Item.errorMessage + "</code> ");
                            }

                            var codeMirror = CodeMirror.fromTextArea(document.getElementById(textAreaUuid), {
                                mode: "text/x-sql",
                                theme: "darcula"
                            });
                            codeMirror.setSize("auto", "100px");
                        }
                    }
                    
                }
            }
            $(".timeline").append(templateStart);

            $(".btn-download").click(function () {
                var data = $(this).attr("data-data");
                window.open(Url.fileDownload.replace("{uuid}", data), "_blank");
            });

            new ClipboardJS(".btn-copy", {
                text: function(trigger) {
                    var textAreaUuid = $("#" + trigger.id).attr("data-data");
                    return $("#" + textAreaUuid).val();
                }
            }).on('success', function(e) {
                parent.window.frameCtrl.toastr.success("复制成功");
            }).on('error', function(e) {
                parent.window.frameCtrl.toastr.error("复制失败");
            });
        },
        beforeSend: function (xhr) {
            $(".timeline").html("<div style='text-indent: 2em'></div>");
        },
    });
</script>
</body>
</html>